<!--
 * @Description: useImage(loading图像)
 * @Author: r_yuesheng
 * @Date: 2022-12-23 16:33:52
 * @LastEditTime: 2022-12-28 15:49:12
 * @LastEditors: r_yuesheng
-->
<template>
  <div>
    <div>引用core方法</div>
    <el-button @click="enter" type="primary">开启全屏</el-button>
    <el-button @click="exit" type="danger">退出全屏</el-button>
  </div>
  <div class="mt20 ">
    引用组件
    <div class="useFullscreen">
      <UseFullscreen v-slot="{ toggle,isFullscreen }">
     <div style="height:90%">
      <video v-if="isFullscreen" ref="el" class="m-auto rounded" style="height:100%" src="https://vjs.zencdn.net/v/oceans.mp4" controls />
      <video v-else ref="el" class="m-auto rounded" src="https://vjs.zencdn.net/v/oceans.mp4" controls />
     </div>
      <el-button @click="toggle">
        开启/退出全屏
      </el-button>
    </UseFullscreen>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue';
import { useFullscreen } from '@vueuse/core';
import { UseFullscreen } from '@vueuse/components';
export default {
  name: '',
  props: {},
  components: { UseFullscreen },
  setup(props, { emit }) {
    const { isFullscreen, enter, exit, toggle } = useFullscreen();
    function initState() {
      return {
        test: '',
      };
    }
    const state = reactive(initState());
    return {
      ...toRefs(state),
      enter,
      exit,
    };
  },
};
</script>
<style scoped lang="less">
.useFullscreen {
  video {
    max-width: 100%;
    height: auto;
  }
  .m-auto {
    margin: auto;
  }
  .rounded {
    border-radius: 0.25rem;
  }
}
</style>